import * as THREE from 'three'
import {AmbientLight} from "three";

let renderer: THREE.WebGLRenderer;
let width: number;
let height: number;
let stats

declare const Stats
function initThree() {
    width = document.getElementById('canvas-frame').clientWidth
    height = document.getElementById('canvas-frame').clientHeight
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(width, height)
    document.getElementById('canvas-frame').appendChild(renderer.domElement)
    renderer.setClearColor(0xffffff, 1.0)

    stats = new Stats();
    document.getElementById('canvas-frame').appendChild(stats.domElement);
}

let camera: THREE.PerspectiveCamera;

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    camera.position.set(0, 0, 600)
    camera.up.set(0, 1, 0)
    camera.lookAt(0, 0, 0)
}

let scene: THREE.Scene;

function initSence() {
    scene = new THREE.Scene()
}

function initLight() {
    const light1 = new THREE.AmbientLight(0xFF0000);
    light1.position.set(100, 100, 200)
    const light2 = new THREE.PointLight(0x00FF00)
    light2.position.set(0, 0, 300)
    scene.add(light1, light2)
}

let mesh:THREE.Mesh;
function initObject() {
    mesh = new THREE.Mesh(new THREE.CylinderGeometry(100, 150, 400),
        new THREE.MeshLambertMaterial({color: 0xFFFFFF}))
    mesh.position.set(0,0,0)
    scene.add(mesh)
}

function initTween() {
    createjs.Tween.get(mesh.position, {loop: true}).to({x: -1000}, 3000)
    // new TWEEN.Tween( mesh.position)
    //     .to( { x: -400 }, 3000 ).repeat( Infinity ).start();
}

function threeStart() {
    initThree()
    initCamera()
    initSence()
    initLight()
    initObject()
    animation();
}

function animation() {
    // mesh.position.x -= 1;
    renderer.render(scene, camera)
    requestAnimationFrame(animation)
    stats.update();
}

threeStart();